<template>
  <div class="AddOrUpdate_main add_container column_two">
    <div class="main_main showDeatils">
      <el-form ref="form" :model="formData" :rules="rules" :inline="true">
        <el-form-item label="企业名称" class="border_bottom">
          <div v-if="formData.name" class="show">{{ formData.name }}</div>
          <div v-else class="show noData">暂无</div>
        </el-form-item>
        <el-form-item label="现有空间" class="border_bottom">
          <div v-if="formData.space" class="show">{{ formData.space }}</div>
          <div v-else class="show noData">暂无</div>
        </el-form-item>
        <el-form-item label="剩余空间" class="border_bottom">
          <div v-if="formData.freeSpace" class="show">{{ formData.freeSpace }}</div>
          <div v-else class="show noData">暂无</div>
        </el-form-item>
        <el-form-item />
        <el-form-item label="空间调整为" class="space" prop="recordSpaces">
          <!-- <DictSelect
            :band-value.sync="formData.recordSpaces"
            dict-type="sys_disk_space"
          /> -->
          <el-select v-model="formData.recordSpaces" placeholder="请选择">
            <el-option
              v-for="item in spaceOptions"
              :key="item.dictCode"
              :label="item.dictLabel"
              :value="item.dictLabel"
            />
          </el-select>

        </el-form-item>
      </el-form>
      <div class="formItem_header">
        更新记录
      </div>
      <div ref="table_container" class="table_container draggableTable addRow_table">
        <el-table
          ref="table"
          :data="tableData"
          stripe
          border
          row-key="id"
          style="width: 99.9%"
        >
          <el-table-column
            label="存储空间"
            prop="recordSpace"
          />
          <el-table-column
            prop="lastUpdateTime"
            label="更新时间"
          />
          <el-table-column
            prop="lastUpdatePerson"
            label="更新人"
          />
        </el-table>
      </div>
    </div>
    <div class="main_bottom">
      <el-button type="cancel" @click.stop="cancel">取消</el-button>
      <el-button @click.stop="onSubmit">确定</el-button>
    </div>
  </div>
</template>

<script>
import { getInfoDisk, addOrUpdate, spaceDict } from '@/api/superManage/diskSpaceMonitoring'
export default {
  name: 'ShowDetail',
  props: {
    layerid: {},
    id: {},
    companyId: {},
    freeSpace: {}
  },
  data() {
    return {
      formData: {
        id: undefined,
        name: '',
        space: '',
        freeSpace: '',
        recordSpaces: '',
        diskSpaceList: []
      },
      tableData: [],
      spaceOptions: [],
      rules: {
        recordSpaces: [
          { required: true, message: '空间调整不能为空', trigger: 'change' }
        ]
      }
    }
  },
  created() {
    this.getInfoDisk()
    this.getSpaceDict()
  },
  mounted() {

  },
  methods: {
    getSpaceDict() {
      spaceDict().then(res => {
        this.spaceOptions = res.data
      })
    },
    getInfoDisk() {
      getInfoDisk(this.companyId).then(res => {
        this.formData = res.data
        this.formData.freeSpace = this.freeSpace
        this.tableData = res.data.diskSpaceList
        console.log(res)
      })
    },
    onSubmit() {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          addOrUpdate({ companyId2: this.companyId, recordSpace: this.formData.recordSpaces }).then(res => {
            this.$layer.close(this.layerid)// 关闭弹框
            this.$message.success(res.msg)
            this.$parent.refresh()
          })
        }
      })
    },
    cancel() {
      this.$layer.close(this.layerid)// 关闭弹框
    }
  }
}
</script>

<style lang="less" scoped>
.border_bottom{
    border-bottom: 1px solid rgba(105,105,105,0.2);
    padding-bottom: 10px;
}
.space{
    /deep/ .el-form-item__label{
        color: #666 !important;
    }
}
.noData{
  color: #c0c4cc;
}
.showPicture{
  display: flex;
  .pictureCode_div{
  }
  .file_div{
    margin-left: 10px;
    // color: blue;
  }
}
/deep/ .el-form-item{
  .el-form-item__label{
    color: #1F51B3;
    font-size: 15px;
  }
  .el-form-item__content{
    color: #333333;
    font-size: 15px;
  }
}
.el-table {
  font-size: 15px;
}
</style>
